App.require(["matrix3"], function (matrix3) {
    var Matrix3 = matrix3.Matrix3;
    App.defineWidget("column", {
        createPath: function (ctx) {
            var style = this.style;
            ctx.beginPath();
            for (var i = 0; i < style.option.length; i++) {
                var rx = style.x + i * style.distance - style.cwidth / 2,
                    value = style.option[i].value * style.percent,
                    ry = style.y - style.option[i].value * style.percent;
                ctx.rect(rx, ry, style.cwidth, value)
            }
        },
        render: function (ctx) {
            ctx.save();
            var style = this.style;
            if (style.option.length == 0) return;
            ctx.globalAlpha = style.opacity;
            var shadowObj = App.Widget.strToShadow(style.shadow);
            if (shadowObj) {
                ctx.shadowOffsetX = shadowObj.x;
                ctx.shadowOffsetY = shadowObj.y;
                ctx.shadowBlur = shadowObj.blur;
                ctx.shadowColor = shadowObj.color;
            }
            // this.createPath(ctx);
            ctx.fillStyle = style.fill;
            if (style.stroke) {
                ctx.linewidth = style.linewidth;
                if (Array.isArray(style.linedash) && style.linedash.length > 0) {
                    ctx.setLineDash(style.linedash);
                    ctx.lineDashOffset = style.linedashoffset;
                }
                ctx.strokeStyle = style.stroke;
            }
            for (var i = 0; i < style.option.length; i++) {
                var rx = style.x + i * style.distance - style.cwidth / 2,
                    value = style.option[i].value * style.percent,
                    ry = style.y - style.option[i].value * style.percent;
                ctx.beginPath();
                ctx.rect(rx, ry, style.cwidth, value)
                if (style.fill) ctx.fill();
                if (style.stroke) ctx.stroke();
                if (style.marker) {
                    var viewer = this.getViewer();
                    var marker = viewer.getGlobalWidgetByName(style.marker);
                    ctx.save();
                    ctx.translate(rx + style.cwidth / 2 + this.markerOffset.x, ry + this.markerOffset.y);
                    marker.render(ctx);
                    ctx.restore();
                }
            }
            
            ctx.restore();
        },
        initBehaviors: [ 
            { name: "percentUp", style: {}, initStyle: { percent: 0 } }
        ],
        isPointIn: function (ctx, x, y) {
            this.createPath(ctx);
            return ctx.isPointInPath(x, y);
        },
        style: { 
            x: 0,
            y: 0,
            cwidth: 20,
            direction: App.AxisDirectionOption.BOTTOMTOP,
            distance: 25,
            rstart: "",
            mark: "",
            markOffset: "",
            markerOffset: "",
            rend: "",
            marker: "",
            shadow: "0 0 0 black",
            stroke: "black",
            fill: "red",
            opacity: 1,
            linewidth: 1,
            linedash: "",
            linedashoffset: 0,
            percent: 1,
            option: [ { value: 20 }, { value: 40 } ]
        },
        get x() {
            return this.style.x;
        },
        set x(val) {
            this.style.x = val;
            this.getScene().nextRender();
        },
        set y(val) {
            this.style.y = val;
            this.getScene().nextRender();
        },
        get y() {
            return this.style.y;
        },
        get cwidth() {
            return this.style.cwidth;
        },
        set cwidth(val) {
            this.style.cwidth = val;
            this.getScene().nextRender();
        },
        get direction() {
            return this.style.direction;
        },
        set direction(val) {
            this.style.direction = val;
            this.getScene().nextRender();
        },
        get distance() {
            return this.style.distance;
        },
        set distance(val) {
            this.style.distance = val;
            this.getScene().nextRender();
        },
        get rstart() {
            return this.style.rstart;
        },
        set rstart(val) {
            this.style.rstart = val;
            this.getScene().nextRender();
        },
        get rend() {
            return this.style.rend;
        },
        set rend(val) {
            this.style.rend = val;
            this.getScene().nextRender();
        },
        get mark() {
            return this.style.mark;
        },
        set mark(val) {
            this.style.mark = val;
            this.getScene().nextRender();
        },
        get markerOffset() {
            if (this.style.markerOffset) {
                return App.Widget.strToMarkerOffset(this.style.markerOffset);
            }
            return { x: 0, y: -20 };
        },
        set markerOffset(val) {
            this.style.markOffset = val;
            this.getScene().nextRender();
        },
        get marker() {
            return this.style.marker;
        },
        set marker(val) {
            this.style.marker = val;
            this.getScene().nextRender();
        },
        get shadow() {
            return this.style.shadow;
        },
        set shadow(val) {
            this.style.shadow = val;
            this.getScene().nextRender();
        },
        get stroke() {
            return this.style.stroke;
        },
        set stroke(val) {
            this.style.stroke = val;
            this.getScene().nextRender();
        },
        get fill() {
            return this.style.fill;
        },
        set fill(val) {
            this.style.fill = val;
            this.getScene().nextRender();
        },
        get opacity() {
            return this.style.opacity;
        },
        set opacity(val) {
            this.style.opacity = val;
            this.getScene().nextRender();
        },
        get linewidth() {
            return this.style.linewidth;
        },
        set linewidth(val) {
            this.style.linewidth = val;
            this.getScene().nextRender();
        },
        get linedash() {
            return this.style.linedash;
        },
        set linedash(val) {
            this.style.linedash = val;
            this.getScene().nextRender();
        },
        get linedashoffset() {
            return this.style.linedashoffset;
        },
        set linedashoffset(val) {
            this.style.linedashoffset = val;
            this.getScene().nextRender();
        },
        get percent() {
            return this.style.percent;
        },
        set percent(val) {
            this.style.percent = val;
            this.getScene().nextRender();
        }
    })
})